<template>
    <v-app>
        <v-row style="margin-top: 10px">
<!--            article list-->
            <v-col cols="12" sm="8">
                <v-row>
                    <v-col v-for="i in atcs.content" cols="6" :key="i.id">
                        <v-card
                                class="mx-auto"
                                width="90%"
                        >
                            <v-img
                                    style="cursor: pointer"
                                    :src="i.img"
                                    @click="$router.push('/article/'+i.id)"
                            ></v-img>

                            <v-card-title>
                                <router-link style="text-decoration: none; color: black" :to="'/article/'+i.id">{{i.title}}</router-link>
                            </v-card-title>

                            <v-card-subtitle>
                                {{i.des}}
                            </v-card-subtitle>

                            <v-card-text>
                                {{i.theTime}}
                            </v-card-text>
                        </v-card>
                    </v-col>
                </v-row>
                <br/>
                <div class="text-center">
                    <v-pagination
                            @input="changePage"
                            v-model="page"
                            :length="atcs.totalPages"
                            circle
                    ></v-pagination>
                </div>
            </v-col>
<!--            aside list-->
            <v-col cols="12" sm="4">
                <v-card tile>
                    <v-card-title>置顶</v-card-title>
                    <v-list dense>
                        <v-list-item-group
                                color="primary"
                        >
                            <v-list-item
                                    v-for="i in topItems"
                                    :key="i.id"
                                    :to="'/article/'+i.id"
                            >
                                <v-list-item-content>
                                    <v-list-item-title v-text="i.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-card>
                <br/>
                <v-card tile>
                    <v-card-title>蜡烛排行</v-card-title>
                    <v-list dense>
                        <v-list-item-group
                                color="primary"
                        >
                            <v-list-item
                                    v-for="i in lightsItems"
                                    :key="i.id"
                                    :to="'/article/'+i.id"
                            >
                                <v-list-item-content>
                                    <v-list-item-title v-text="i.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-card>
                <br/>
                <v-card tile>
                    <v-card-title>点赞排行</v-card-title>
                    <v-list dense>
                        <v-list-item-group
                                color="primary"
                        >
                            <v-list-item
                                    v-for="i in likesItems"
                                    :key="i.id"
                                    :to="'/article/'+i.id"
                            >
                                <v-list-item-content>
                                    <v-list-item-title v-text="i.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-card>
            </v-col>
        </v-row>
        <br/>
    </v-app>
</template>

<script>
    export default {
        name: "Home",
        // props: ['drawer'],
        methods: {
            changePage(page){
                const t = this;
                this.getIndex(page, 6).then(function (resp) {
                    t.atcs = resp.data;
                    scrollTo(0,0);
                })
            },
            getAsideData(){
                const t = this;
                this.getTopAtc().then(function (resp) {
                    t.topItems = resp.data;
                })
                this.getByLights().then(function (resp) {
                    t.lightsItems = resp.data.content;
                })
                this.getByLikes().then(function (resp) {
                    t.likesItems = resp.data.content;
                })
            },
        },
        created() {
            this.changePage(this.page, 6);
            this.getAsideData();
        },
        data: () => ({
            page: 1,
            show: false,
            topItems: [],
            likesItems: [],
            lightsItems: [],
            atcs: '',
        }),
    }
</script>

<style scoped>

</style>